<div class="box-container">
    <div class="main-content">
        <div class="content-body">
            <div class="content-top-bar">
                <div>
                    <div>
                        日期： <nz-date-picker [(ngModel)]="today" (ngModelChange)="getDetailData($event)"></nz-date-picker>
                    </div>
                    <div class="table-btn-group">
                        <button nz-button nzType="primary" *ngIf="roleName==='宁西公司调度'" (click)="openSubmitModal()">当日值填报</button>
                        <!--<button nz-button nzType="primary" *ngIf="!!isSubmitTableShow" (click)="submitModalShow = false">结束填报</button>-->
                        <!--<button nz-button nzType="primary" *ngIf="isSubmitTableShow" (click)="submit()">提交</button>-->
                        <!--<button nz-button nzType="default" *ngIf="isSubmitTableShow" (click)="save()">暂存</button>-->
                    </div>
                </div>

                <div class="custom-btn-group">
                    <div style="margin-right: 20px">(灌溉面积：亩)</div>
                    <a class="top-bar-btn" (click)="openDetailModal()">
                        <i nz-icon nzType="history" nzTheme="outline"></i> 历史记录
                    </a>
                    <a class="top-bar-btn" (click)="exportFile()">
                        <i nz-icon nzType="file-excel" nzTheme="outline"></i> 导出
                    </a>
                    <!--<a class="top-bar-btn" (click)="print()">-->
                    <!--<i nz-icon nzType="printer" nzTheme="outline"></i>-->
                    <!--</a>-->
                </div>
            </div>
            <div class="table-box">
                <nz-table #totalTable
                          class="main-table"
                          [nzData]="totalTableData"
                          nzBordered
                          nzTitle="统计数据"
                          [nzFrontPagination]="false"
                          nzSize="middle">
                    <thead>
                    <tr class="custom-head">
                        <th rowspan="2">名称</th>
                        <th *ngFor="let title of summerHead" colspan="4">{{title.name}}</th>
                    </tr>
                    <tr class="custom-head">
                        <ng-container *ngFor="let title of summerHead">
                            <th>当日</th>
                            <th>累计</th>
                            <th>计划</th>
                            <th>占计划</th>
                        </ng-container>
                    </tr>
                    </thead>
                    <tbody>
                    <tr *ngFor="let data of totalTable.data;let idx = index"
                        [class]="{'even':idx % 2 === 1}"
                        (click)="getChartData(data)"
                        class="editable-row">
                        <td>{{data.srName}}</td>
                        <ng-container *ngFor="let item of summerHead">
                            <td>{{ data[item.dailyName] }}</td>
                            <td>{{ data[item.accName] }}</td>
                            <td>{{ data[item.plan] }}</td>
                            <td>{{ data[item.percentage] }}</td>
                        </ng-container>
                    </tr>
                    </tbody>
                </nz-table>
            </div>
            <div echarts
                 class="bottom-chart-box"
                [options]="baseOpt"
                [merge]="irrOptChange"
                style="height: 291px;"
            ></div>
            <!--<div *ngIf="isSubmitTableShow" class="table-box">-->
            <!--<nz-card nzTitle="当日值填报" [nzExtra]="extraTemplate">-->
            <!--<nz-table #myTable-->
            <!--[nzData]="tableData"-->
            <!--nzBordered-->
            <!--[nzFrontPagination]="false"-->
            <!--nzSize="middle">-->
            <!--<thead>-->
            <!--<tr>-->
            <!--<th nzWidth="250px">名称</th>-->
            <!--<th *ngFor="let title of summerHead">{{title.name}}</th>-->
            <!--</tr>-->
            <!--</thead>-->
            <!--<tbody>-->
            <!--<tr *ngFor="let data of myTable.data" class="editable-row">-->
            <!--<td>{{data.srName}}</td>-->
            <!--<td *ngFor="let item of summerHead">-->
            <!--<div class="editable-cell" *ngIf="!editCache[data.srId].edit; else editRow">-->
            <!--<div class="editable-cell-value-wrap" (click)="startEdit(data.srId, $event)">-->
            <!--{{ data[item.dailyName] }}-->
            <!--</div>-->
            <!--</div>-->
            <!--<ng-template #editRow>-->
            <!--<input type="text" nz-input [(ngModel)]="data[item.dailyName]"/>-->
            <!--</ng-template>-->
            <!--</td>-->
            <!--</tr>-->
            <!--</tbody>-->
            <!--</nz-table>-->
            <!--</nz-card>-->
            <!--<ng-template #extraTemplate>-->
            <!--<div class="btn-group">-->
            <!--<button nz-button nzType="primary" (click)="submit()">提交</button>-->
            <!--<button nz-button nzType="default" (click)="save()" style="margin-left: 10px">暂存</button>-->
            <!--</div>-->
            <!--</ng-template>-->
            <!--</div>-->
        </div>
    </div>
</div>

<nz-modal nzClassName="custom-modal" [(nzVisible)]="modalShow" [nzTitle]="modalTitle"
          (nzOnCancel)="onCancel()" (nzOnOk)="onCancel()" nzWidth="85%">
    <div style="margin-bottom: 10px">
        <nz-range-picker [ngModel]="range" (ngModelChange)="onRangeChange($event)"></nz-range-picker>
        <nz-radio-group [nzButtonStyle]="'solid'" [(ngModel)]="quickTimeSelect" (ngModelChange)="quickSelect()" style="margin-left: 15px">
            <label nz-radio-button nzValue="7">近7日</label>
            <label nz-radio-button nzValue="15">近15日</label>
            <label nz-radio-button nzValue="30">近30日</label>
        </nz-radio-group>
    </div>
    <nz-table #groupingTable1
              [nzData]="irrHistoryData"
              nzBordered
              [nzLoading]="loading"
              [nzWidthConfig]="historyWidthConfig"
              [nzScroll]="historyScrollConfig"
              nzSize="middle">
        <thead>
        <tr>
            <th rowspan="2">日期</th>
            <th *ngFor="let title of modalFirstHead" [colSpan]="summerHead.length">{{title}}</th>
        </tr>
        <tr>
            <ng-container *ngFor="let title of modalFirstHead">
                <th *ngFor="let item of summerHead">{{item.name}}</th>
            </ng-container>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let data of groupingTable1.data" class="editable-row">
            <td>{{ data.date }}</td>
            <ng-container *ngFor="let item of data.datas">
                <td *ngFor="let tdData of item.irrDatas">{{ tdData.val }}</td>
            </ng-container>
        </tr>
        </tbody>
    </nz-table>

</nz-modal>

<nz-modal nzClassName="custom-modal" nzWidth="80%" [(nzVisible)]="submitModalShow" [nzTitle]="submitModalTitle"
          (nzOnCancel)="onSubmitCancel()" [nzFooter]="null" [nzBodyStyle]="submitModalStyle">
    <div class="loading-wrap" *ngIf="isModalLoading; else elseBlock">
        <nz-spin nzSimple></nz-spin>
    </div>


    <ng-template #elseBlock>
        <nz-card [nzTitle]="submitContentTitle" [nzExtra]="extraTemplate">
            <nz-table #myTable
                      [nzData]="tableData"
                      nzBordered
                      [nzLoading]="modalTableLoading"
                      [nzLoadingIndicator]="tableLoadingIndicator"
                      [nzFrontPagination]="false"
                      nzSize="middle">
                <thead>
                <tr>
                    <th nzWidth="250px">名称</th>
                    <th *ngFor="let title of summerHead">{{title.name}}</th>
                </tr>
                </thead>
                <tbody>
                <tr *ngFor="let data of myTable.data" class="editable-row">
                    <td>{{data.srName}}</td>
                    <td *ngFor="let item of summerHead">
                        <div class="editable-cell" *ngIf="!editCache[data.srId].edit; else editRow">
                            <div class="editable-cell-value-wrap" (click)="startEdit(data.srId, $event)">
                                {{ data[item.dailyName] }}
                            </div>
                        </div>
                        <ng-template #editRow>
                            <input type="text" nz-input [(ngModel)]="data[item.dailyName]"/>
                        </ng-template>
                    </td>
                </tr>
                </tbody>
            </nz-table>
        </nz-card>
        <ng-template #tableLoadingIndicator>
            <div>
                <nz-spin nzTip="正在提交..."></nz-spin>
            </div>

        </ng-template>
        <ng-template #extraTemplate>
            <div class="btn-group">
                <!--<button nz-button nzType="primary" (click)="warning()">填报模板下载</button>
                <button nz-button nzType="primary" (click)="warning()">数据导入</button>-->
                <button nz-button nzType="primary" (click)="submit()">提交</button>
                <button nz-button nzType="default" (click)="save()">暂存</button>
            </div>
        </ng-template>
    </ng-template>


</nz-modal>
